<template>
    <div class="musiclistdetail">
        <div class="card">
            <div class="top">
                <img :src="musicList.coverImgUrl" alt="" />
                <div class="title_box">
                    <div class="title">
                        <span>歌单</span>
                        <h3>{{ musicList.name }}</h3>
                    </div>
                    <div class="create">
                        <img :src="musicList.creator.avatarUrl" alt="" />
                        <span class="name">
                            {{ musicList.creator.nickname }}
                        </span>
                        <span class="time"
                            >{{ musicList.createTime | showDate }} 创建</span
                        >
                    </div>
                    <div class="buttons">
                        <span class="play" @click="playAll(musicList.tracks)">
                            <i class="iconfont icon-bofang"></i>
                            <span>播放全部</span>
                        </span>
                    </div>
                    <div class="info">
                        <p>
                            标签：<span>{{ musicList.tags | filterTags }}</span>
                        </p>
                        <p>
                            歌曲：{{
                                musicList.tracks.length
                            }}
                            &nbsp;&nbsp;播放：{{ musicList.playCount }}
                        </p>
                        <p style="line-height: 25px">
                            简介：{{ musicList.description }}
                        </p>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <el-tabs v-model="activeName" @tab-click="tabClick">
                    <el-tab-pane label="歌曲列表" name="list">
                        <MusicTable :musicList="musicList"></MusicTable>
                    </el-tab-pane>
                    <el-tab-pane label="评论" name="comment">
                        <div class="comment_list">
                            <div
                                v-for="item in commentList"
                                class="comment_card_box"
                            >
                                <comment-card :commentVal="item"></comment-card>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script>
import request from "@/request/request.js";
import CommentCard from "@/components/comment/CommentCard";
import MusicTable from "@/components/musicTable/MusicTable";
import { handleMusicTime, filterTags, formatDate } from "@/utils/utils";
export default {
    data() {
        return {
            musicList: {
                creator: {
                    avatarUrl: ""
                }
            },
            activeName: "list",
            commentList: []
        };
    },
    components: {
        CommentCard,
        MusicTable
    },
    methods: {
        async getMusicList() {
            let res = await request(
                `/playlist/detail?id=${this.$route.params.id}`
            );
            console.log(res);
            res.data.playlist.tracks.forEach((item, index) => {
                res.data.playlist.tracks[index].dt = handleMusicTime(item.dt);
            });
            this.musicList = res.data.playlist;
        },
        tabClick(e) {
            if ((e.index = 1)) {
                request(
                    `/comment/playlist?id=${this.$route.params.id}&offset=0&limit=50`
                ).then(res => {
                    this.commentList = res.data.hotComments;
                });
            }
        },
        playAll(tracks) {
            this.$store.commit("updateMusicId", tracks[0].id);
            this.$store.commit("updateMusicList", {
                musicList: tracks,
                musicListId: this.musicList.id
            });
        }
    },
    filters: {
        showDate(value) {
            // 1、先将时间戳转成Date对象
            const date = new Date(value);

            // 2、将date进行格式化
            return formatDate(date, "yyyy-MM-dd");
        },
        filterTags
    },
    created() {
        this.getMusicList();
    }
};
</script>

<style lang="less" scoped>
.musiclistdetail {
    display: flex;
    justify-content: center;
    padding-bottom: 70px;
    .card {
        width: 90%;
        padding: 30px 0;
        .top {
            display: flex;

            & > img {
                width: 160px;
                height: 160px;
                border-radius: 20px;
            }
            .title_box {
                // display: flex;
                // flex-direction: column;
                // justify-content: space-between;
                margin-left: 20px;
                font-size: 13px;
                & > * {
                    padding-bottom: 10px;
                }

                .title {
                    display: flex;
                    align-items: center;
                    font-size: 20px;
                    font-weight: 700;
                    span {
                        font-size: 14px;
                        border: 1px solid #ec4141;
                        color: #ec4141;
                        padding: 2px;
                        border-radius: 5px;
                        margin-right: 10px;
                    }
                }
                .create {
                    display: flex;
                    align-items: center;
                    & > * {
                        margin-right: 10px;
                    }
                    img {
                        width: 25px;
                        height: 25px;
                        border-radius: 50%;
                    }
                    .name {
                        color: #729bc6;
                        font-weight: 700;
                    }
                }
                .buttons {
                    display: flex;
                    justify-content: flix-start;
                    .play {
                        background-color: #ec4141;
                        border-radius: 50px;
                        color: #fff;
                        padding: 8px 15px;
                        font-size: 14px;
                        cursor: pointer;
                        span {
                            padding-left: 5px;
                        }
                    }
                }
                .info {
                    p {
                        padding-bottom: 8px;
                    }
                    span {
                        color: #729bc6;
                        font-weight: 700;
                    }
                }
            }
        }
        .bottom {
            margin-top: 20px;
        }
    }

    .el-tabs {
        ::v-deep .is-active {
            color: #000;
            font-weight: 700;
        }

        ::v-deep .el-tabs__item {
            font-size: 16px;
            &:hover {
                color: #000;
                font-weight: 700;
            }
        }

        ::v-deep .el-tabs__active-bar {
            background-color: #ec4141 !important;
        }
        ::v-deep .el-tabs__nav-wrap::after {
            background-color: #fff;
        }
    }
    .is-active {
        color: #ec4141;
    }

    .el-table__body {
        ::vue-deep tr {
            cursor: pointer;
        }
    }
}
</style>
